<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    @if (!courseContentsPage) {
        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
        </ion-button>
    } @else {
        <core-context-menu>
            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
                iconAction="fas-circle-info" />
        </core-context-menu>
    }
</core-navbar-buttons>

<!-- Content. -->
<core-loading [hideUntil]="!showLoading">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [component]="component" [componentId]="componentId" [courseId]="courseId"
        [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />

    @if (phases && workshop) {
        <ion-card>
            <ion-item button (click)="viewPhaseInfo()" [detail]="true">
                <ion-label>
                    <h2 class="ion-text-wrap">{{ phases[workshop.phase].title }}</h2>
                </ion-label>
            </ion-item>
            @if (phases[workshop.phase] && phases[workshop.phase].tasks &&
            phases[workshop.phase].tasks.length) {

                <ion-item button class="ion-text-wrap" *ngFor="let task of phases[workshop.phase].tasks"
                    [class.item-dimmed]="task.code === 'submit' && !showSubmit" (click)="runTask(task)" [detail]="false">
                    @switch (task.completed) {
                        @case (null) {
                            <ion-icon slot="start" name="far-circle" [attr.aria-label]="'addon.mod_workshop.tasktodo' | translate" />
                        }
                        @case ('') {
                            <ion-icon slot="start" name="fas-circle-xmark" color="danger"
                                [attr.aria-label]="'addon.mod_workshop.taskfail' | translate" />
                        }
                        @case ('info') {
                            <ion-icon slot="start" name="fas-circle-info" color="info"
                                [attr.aria-label]="'addon.mod_workshop.taskinfo' | translate" />
                        }
                        @case ('1') {
                            <ion-icon slot="start" name="fas-circle-check" color="success"
                                [attr.aria-label]="'addon.mod_workshop.taskdone' | translate" />
                        }
                    }
                    <ion-label>
                        <p class="item-heading">{{task.title}}</p>
                        @if (task.details) {
                            <p [innerHTML]="task.details"></p>
                        }
                    </ion-label>
                    @if (task.link && task.code !== 'submit') {
                        <ion-icon slot="end" name="fas-up-right-from-square" aria-hidden="true" />
                    }
                </ion-item>

            }
        </ion-card>
    }

    @if (workshop) {
        @if (description && workshop.phase === phaseSetup) {
            <!-- Description (setup phase only) -->
            <ion-card>
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <h3 class="item-heading">{{ 'core.description' | translate }}</h3>
                        <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
                            [contextInstanceId]="module.id" [courseId]="courseId" />
                    </ion-label>
                </ion-item>
            </ion-card>
        }

        @if (access && workshop.phase >= phaseSubmission) {
            <div>
                @if (workshop.phase >= phaseClosed) {
                    <!-- CLOSED PHASE -->

                    @if (workshop.conclusion) {
                        <ion-card>
                            <ion-item class="ion-text-wrap">
                                <ion-label>
                                    <h3 class="item-heading">{{ 'addon.mod_workshop.conclusion' | translate }}</h3>
                                    <core-format-text collapsible-item [component]="component" [componentId]="module.id"
                                        [text]="workshop.conclusion" contextLevel="module" [contextInstanceId]="module.id"
                                        [courseId]="courseId" />
                                </ion-label>
                            </ion-item>
                        </ion-card>
                    }

                    @if (userGrades) {
                        <ion-card>
                            <ion-item-divider class="ion-text-wrap">
                                <ion-label>
                                    <h3 class="item-heading">{{ 'addon.mod_workshop.yourgrades' | translate }}</h3>
                                </ion-label>
                            </ion-item-divider>
                            @if (userGrades.submissionlongstrgrade) {
                                <ion-item class="ion-text-wrap">
                                    <ion-label>
                                        <p class="item-heading">{{ 'addon.mod_workshop.submissiongrade' | translate }}</p>
                                        <p>{{ userGrades.submissionlongstrgrade }}</p>
                                    </ion-label>
                                </ion-item>
                            }
                            @if (userGrades.assessmentlongstrgrade) {
                                <ion-item class="ion-text-wrap">
                                    <ion-label>
                                        <p class="item-heading">{{ 'addon.mod_workshop.gradinggrade' | translate }}</p>
                                        <p>{{ userGrades.assessmentlongstrgrade }}</p>
                                    </ion-label>
                                </ion-item>
                            }
                        </ion-card>
                    }

                }

                @if (workshop.phase === phaseSubmission && workshop.instructauthors) {
                    <!-- SUBMISSION PHASE -->
                    <ion-card>
                        <ion-item class="ion-text-wrap">
                            <ion-label>
                                <h3 class="item-heading">{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h3>
                                <core-format-text collapsible-item [component]="component" [componentId]="module.id"
                                    [text]="workshop.instructauthors" contextLevel="module" [contextInstanceId]="module.id"
                                    [courseId]="courseId" />
                            </ion-label>
                        </ion-item>
                    </ion-card>
                }

                @if (canSubmit) {
                    <ion-card>
                        <ion-item-divider class="ion-text-wrap">
                            <ion-label>
                                @if (workshop.phase !== phaseClosed || !submission) {
                                    <h3 class="item-heading">
                                        {{ 'addon.mod_workshop.yoursubmission' | translate }}
                                    </h3>
                                } @else {
                                    <h3 class="item-heading">
                                        {{ 'addon.mod_workshop.yoursubmissionwithassessments' | translate }}
                                    </h3>
                                }
                            </ion-label>
                        </ion-item-divider>
                        @if (!submission) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>
                                    <p>{{ 'addon.mod_workshop.noyoursubmission' | translate }}</p>
                                </ion-label>
                            </ion-item>
                        } @else {
                            <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop.course" [module]="module"
                                [workshop]="workshop" [access]="access" />
                        }
                    </ion-card>
                }


                @if (workshop.phase >= phaseClosed) {

                    @if (publishedSubmissions && publishedSubmissions.length) {
                        <ion-card>
                            <ion-item-divider class="ion-text-wrap">
                                <ion-label>
                                    <h3 class="item-heading">{{ 'addon.mod_workshop.publishedsubmissions' | translate }}</h3>
                                </ion-label>
                            </ion-item-divider>
                            <ng-container *ngFor="let submission of publishedSubmissions">
                                <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop.course" [module]="module"
                                    [workshop]="workshop" [access]="access" [summary]="true" class="core-as-item" />
                            </ng-container>
                        </ion-card>
                    }

                }

                @if (workshop.phase >= phaseAssessment) {
                    <!-- ASSESSMENT PHASE -->

                    @if (workshop.phase === phaseAssessment && workshop.instructreviewers) {
                        <ion-card>
                            <ion-item class="ion-text-wrap">
                                <ion-label>
                                    <h3 class="item-heading">{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h3>
                                    <core-format-text collapsible-item [component]="component" [componentId]="module.id"
                                        [text]="workshop.instructreviewers" contextLevel="module" [contextInstanceId]="module.id"
                                        [courseId]="courseId" />
                                </ion-label>
                            </ion-item>
                        </ion-card>
                    }

                    @if (canAssess) {
                        <ion-card>
                            <ion-item-divider class="ion-text-wrap">
                                <ion-label>
                                    <h3 class="item-heading">{{ 'addon.mod_workshop.assignedassessments' | translate }}</h3>
                                </ion-label>
                            </ion-item-divider>
                            @if (!assessments || !assessments.length) {
                                <ion-item class="ion-text-wrap">
                                    <ion-label>
                                        <p>{{ 'addon.mod_workshop.assignedassessmentsnone' | translate }}</p>
                                    </ion-label>
                                </ion-item>
                            }
                            <ng-container *ngFor="let assessment of (assessments || [])">
                                <addon-mod-workshop-submission [submission]="assessment.submission" [assessment]="assessment"
                                    [courseId]="workshop.course" [module]="module" [workshop]="workshop" [access]="access" [summary]="true"
                                    class="core-as-item" />
                            </ng-container>
                        </ion-card>
                    }

                }

                @if (access.canviewallsubmissions && workshop.phase >= phaseSubmission &&
                    ((grades && grades.length) || (groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)))) {
                    <!-- MULTIPLE PHASES SUBMISSION OR GREATER only teachers -->
                    <ion-card>
                        <ion-item-divider class="ion-text-wrap">
                            <ion-label>
                                @if (workshop.phase === phaseSubmission) {
                                    <h3 class="item-heading">{{ 'addon.mod_workshop.submissionsreport' | translate }}</h3>
                                } @else if (workshop.phase > phaseSubmission) {
                                    <h3 class="item-heading">{{ 'addon.mod_workshop.gradesreport' | translate }}
                                    </h3>
                                }
                            </ion-label>
                        </ion-item-divider>
                        <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)"
                            [courseId]="courseId" />

                        <ng-container *ngFor="let submission of grades">
                            <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop.course" [module]="module"
                                [workshop]="workshop" [access]="access" [summary]="true" class="core-as-item" />
                        </ng-container>

                        @if (page > 0 || hasNextPage) {
                            <ion-grid>
                                <ion-row class="ion-align-items-center">
                                    @if (page > 0) {
                                        <ion-col>
                                            <ion-button expand="block" fill="outline" (click)="gotoSubmissionsPage(page -1)">
                                                <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true" />
                                                {{ 'core.previous' | translate }}
                                            </ion-button>
                                        </ion-col>
                                    }
                                    @if (hasNextPage) {
                                        <ion-col>
                                            <ion-button expand="block" (click)="gotoSubmissionsPage(page + 1)">
                                                {{ 'core.next' | translate }}
                                                <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true" />
                                            </ion-button>
                                        </ion-col>
                                    }
                                </ion-row>
                            </ion-grid>
                        }
                    </ion-card>
                }
            </div>
        }
    }


    @if (!showLoading) {
        <div collapsible-footer slot="fixed">
            @if (access && workshop?.phase >= phaseSubmission && showSubmit) {
                <div class="list-item-limited-width">
                    <!-- Show only on current phase -->
                    @if (access.creatingsubmissionallowed && !submission) {
                        <ion-button expand="block" (click)="gotoSubmit()" class="ion-text-wrap ion-margin">
                            <ion-icon slot="start" name="fas-plus" aria-hidden="true" />
                            {{ 'addon.mod_workshop.createsubmission' | translate }}
                        </ion-button>
                    }
                    @if (access.modifyingsubmissionallowed && submission) {
                        <ion-button expand="block" (click)="gotoSubmit()" class="ion-text-wrap ion-margin">
                            <ion-icon slot="start" name="fas-pen" aria-hidden="true" />
                            {{ 'addon.mod_workshop.editsubmission' | translate }}
                        </ion-button>
                    }
                </div>
            }

            <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
        </div>
    }
</core-loading>
